<template>
    <div element-loading-text="数据加载中..." v-loading.fullscreen.lock="loadingShow">
        <el-button plain link @click="OpenTestPaperReading()" size="small">阅览</el-button>
        <el-dialog v-model="dialogVisible" title="预览" width="60%" :append-to-body="true" :close-on-click-modal="false" @close="close()">
            <span>
                <el-scrollbar height="600px">
                    <div id="pdfDom">
                        <el-row>
                            <el-col :span="24">
                                <h2 style="text-align:center">{{data.testPaperName}}</h2>
                            </el-col>
                        </el-row>
                        <div style="height:30px" />
                        <el-row justify="space-evenly">
                            <el-col :span="4">{{"时间:"+data.testPaperTimeNumber+"分钟"}}</el-col>
                            <el-col :span="4">{{"总分:"+data.testPaperFraction}}</el-col>
                            <el-col :span="4">{{"难度:"+data.testPaperDifficulty+"分"}}</el-col>
                        </el-row>
                        <div style="height:30px" />
                        <el-row>
                            <el-col :span="24">
                                <span style="font-weight:bold;font-size:130%">
                                    一、选择题
                                </span>
                            </el-col>
                        </el-row>
                        <div style="height:10px" />
                        <el-space direction="vertical" alignment>
                            <el-row v-for="(items,index) in subject.filter(v=>v.subjectTypeId==1)" :key="index">
                                <el-col :span="24">
                                    <div>
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{(index+1)+". "+items.subjectTitle}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                        <div style="height:10px" />
                                        <!-- 选项答案 -->
                                        <el-space direction="vertical" alignment>
                                            <el-row v-for="item in JSON.parse(items.subjectOptionAnswer)"
                                                :key="item.id">
                                                <el-col :span="24">
                                                    <span>
                                                        {{item.id+" . "+item.content}}
                                                    </span>
                                                </el-col>
                                            </el-row>
                                        </el-space>

                                        <!-- 正确答案 -->
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{"正确答案:"+items.subjectRightKey}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-space>


                        <el-row>
                            <el-col :span="24">
                                <span style="font-weight:bold;font-size:130%">
                                    二、判断题
                                </span>
                            </el-col>
                        </el-row>
                        <div style="height:10px" />
                        <el-space direction="vertical" alignment>
                            <el-row v-for="items,index in subject.filter(v=>v.subjectTypeId==2)">
                                <el-col :span="24">
                                    <div>
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{(index+1)+". "+items.subjectTitle}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                        <div style="height:10px" />
                                        <!-- 选项答案 -->
                                        <el-space direction="vertical" alignment>
                                            <el-row v-for="item in JSON.parse(items.subjectOptionAnswer)"
                                                :key="item.id">
                                                <el-col :span="24">
                                                    <span>
                                                        {{item.content}}
                                                    </span>
                                                </el-col>
                                            </el-row>
                                        </el-space>

                                        <!-- 正确答案 -->
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{"正确答案:"+JSON.parse(items.subjectOptionAnswer).filter(v=>v.id==items.subjectRightKey)[0].content}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-space>




                        <el-row>
                            <el-col :span="24">
                                <span style="font-weight:bold;font-size:130%">
                                    三、多选题
                                </span>
                            </el-col>
                        </el-row>
                        <div style="height:10px" />
                        <el-space direction="vertical" alignment>
                            <el-row v-for="(items,index) in subject.filter(v=>v.subjectTypeId==3)" :key="index">
                                <el-col :span="24">
                                    <div>
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{(index+1)+". "+items.subjectTitle}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                        <div style="height:10px" />
                                        <!-- 选项答案 -->
                                        <el-space direction="vertical" alignment>
                                            <el-row v-for="item in JSON.parse(items.subjectOptionAnswer)"
                                                :key="item.id">
                                                <el-col :span="24">
                                                    <span>
                                                        {{item.id+". "+item.content}}
                                                    </span>
                                                </el-col>
                                            </el-row>
                                        </el-space>

                                        <!-- 正确答案 -->
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{"正确答案:"+items.subjectRightKey}}
                                                </span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-space>

                    </div>
                </el-scrollbar>

            </span>
            <template #footer>
                <el-button size="" @click="download()">下载</el-button>
                <el-button size="" @click="close()">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

import { ref } from '@vue/reactivity'
import axios from 'axios'

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    props:['data'],
    setup(props){
        let data = props.data
        let subject = ref()
        function OpenTestPaperReading(){
          loadingShow.value = true
            axios.get("/api/testPaper/selectSubjectByTestPaperId",{
                params:{
                    testPaperId:props.data.testPaperId
                }
            }).then((response)=>{
                if(response.status==200){
                    if(response.data.code==200){
                       
                        subject.value = response.data.data
                        //console.log(subject.value.filter((v)=>{return v.subjectTypeId == 1}))
                        dialogVisible.value = true
                    }
                }
            }).finally(()=>{
              loadingShow.value = false
            })
        }
        let dialogVisible = ref(false)
        function close(){
            dialogVisible.value = false
        }
        //const {proxy}=getCurrentInstance()
        function download() {
            let top = document.getElementById('pdfDom');
            if (top != null) {
                top.scrollIntoView();
                top = null;
            }
            let title = this.exportPDFtitle;

            html2Canvas(document.querySelector('#pdfDom'), {
                allowTaint: true
            }).then(function (canvas) {
                // 获取canvas画布的宽高
                let contentWidth = canvas.width;
                let contentHeight = canvas.height;
                // 一页pdf显示html页面生成的canvas高度;
                let pageHeight = contentWidth / 841.89 * 592.28;
                // 未生成pdf的html页面高度
                let leftHeight = contentHeight;
                // 页面偏移
                let position = 0;
                // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
                let imgWidth = 841.89;
                let imgHeight = 841.89 / contentWidth * contentHeight;
                let pageData = canvas.toDataURL('image/jpeg', 1.0);
                let PDF = new JsPDF('l', 'pt', 'a4');
                // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 592.28;
                        // 避免添加空白页
                        if (leftHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                PDF.save(data.testPaperName + '.pdf')
            })
        }
        function d (){
            window.print();
        }
        let loadingShow = ref(false)
        return {
            OpenTestPaperReading,
            dialogVisible,
            subject,
            data,
            close,
            download,
            d,
          loadingShow
        }
    }
}
</script>

<style>

</style>